<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rasa Core Visualisation</title>
    <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
    <script src="https://dagrejs.github.io/project/dagre/latest/dagre.min.js"></script>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://dagrejs.github.io/project/graphlib-dot/v0.6.3/graphlib-dot.js"></script>
</head>
<body>
<div id="errormsg" style="color: #b00"></div>
<svg>
    <style>
        .node.invisible > rect {
            display: none;
        }

        .node.start > rect {
            fill: #7f7;
            rx: 30;
            ry: 18;
        }

        .node.end > rect {
            fill: #f77;
            rx: 30;
            ry: 18;
        }

        .node:not(.active) > rect, .node:not(.active) > .label {
            opacity: 0.4;
        }

        .edgePath:not(.active) path {
            opacity: 0.4;
        }

        .node.ellipsis > rect {
            fill: #CCC;
        }

        .node.intent > rect {
            fill: #7ff;
        }

        .node.dashed > rect {
            stroke-dasharray: 5;
        }

        text {
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf, serif;
            font-size: 14px;
            color: #1f1d1d;
        }

        .node rect {
            stroke: #444;
            fill: #fff;
            stroke-width: 1.5px;
        }

        .edgePath path {
            stroke: #333;
            stroke-width: 1.5px;
        }

        svg {
            position: fixed;
            top: 10px;
            left: 0;
            height: 100%;
            width: 100%
        }
    </style>
    <g></g>
</svg>
<script>

  function serveGraph() {
    let oldInputGraphValue;

    const url = 'visualization.dot';
    const refreshInterval = 500;

    // trigger a refresh by fetching an updated graph
    setInterval(function () {
      fetch(url).then(r => r.text()).then(dot => {
        document.getElementById('errormsg').innerHTML = '';
        if (oldInputGraphValue === dot) return;

        oldInputGraphValue = dot;
        drawGraph(dot);
      }).catch(err => {
        document.getElementById('errormsg').innerHTML =
          'Failed to update plot. (' + err.message + ')';
      });
    }, refreshInterval);
  }

  function drawGraph(graph) {
    let g = graphlibDot.read(graph);
    // Set margins, if not present
    if (!g.graph().hasOwnProperty("marginx") &&
      !g.graph().hasOwnProperty("marginy")) {
      g.graph().marginx = 20;
      g.graph().marginy = 20;
    }
    g.graph().transition = function (selection) {
      return selection.transition().duration(300);
    };
    // Render the graph into svg g
    d3.select("svg g").call(render, g);
  }
  // Set up zoom support
  const svg = d3.select("svg"),
    inner = d3.select("svg g"),
    zoom = d3.zoom().on("zoom", function () {
      inner.attr("transform", d3.event.transform);
    });
  svg.call(zoom);

  // Create and configure the renderer
  const render = dagreD3.render();

  let isClient = false;
  isClient = true;

  if (isClient) {
    // Mark all nodes and their edges as active
    cssRules = document.styleSheets[0].cssRules;
    cssRules[3].style.opacity = 1;
    cssRules[4].style.opacity = 1;

    let graph;
    graph = `digraph  {
0 [class="start active", fillcolor=green, fontsize=12, label=START, style=filled];
"-1" [class=end, fillcolor=red, fontsize=12, label=END, style=filled];
1 [class="", fontsize=12, label=utter_greet];
2 [class="", fontsize=12, label=utter_ask_package];
3 [class="", fontsize=12, label=utter_ask_time];
4 [class="", fontsize=12, label=utter_confirm];
5 [class="", fontsize=12, label=action_search_consume];
6 [class="", fontsize=12, label=utter_ask_morehelp];
7 [class="", fontsize=12, label=utter_goodbye];
13 [class="", fontsize=12, label=utter_thanks];
14 [class="", fontsize=12, label=action_default_fallback];
28 [class="", fontsize=12, label=utter_confirm];
29 [class="", fontsize=12, label=utter_ack_management];
31 [class="", fontsize=12, label=utter_goodbye];
37 [class="", fontsize=12, label=utter_ask_morehelp];
48 [class=intent, fillcolor=lightblue, label="\你\好\ \您\是\哪\个", shape=rect, style=filled];
49 [class=intent, fillcolor=lightblue, label="\附\近\哪\里\有\餐\厅\？", shape=rect, style=filled];
50 [class=intent, fillcolor=lightblue, label="\在\吗\ \请\您\ \开\ \适\中\ \套\餐", shape=rect, style=filled];
51 [class=intent, fillcolor=lightblue, label="\谢\谢", shape=rect, style=filled];
52 [class=intent, fillcolor=lightblue, label="\我\想\问\一\下\我\一\月\份\是\用\了\多\少\话\费", shape=rect, style=filled];
53 [class=intent, fillcolor=lightblue, label="\你\好\吗\ \帮\我\ \看\一\看\ \三\月\ \流\量\ \多\少\钱", shape=rect, style=filled];
54 [class=intent, fillcolor=lightblue, label="\不\用\了", shape=rect, style=filled];
55 [class=intent, fillcolor=lightblue, label="\下\次\见", shape=rect, style=filled];
56 [class=intent, fillcolor=lightblue, label="\您\是\哪\个\ \请\帮\我\ \查\查\ \十\月\ \流\量\ \多\少\钱", shape=rect, style=filled];
57 [class=intent, fillcolor=lightblue, label="\/inform\{\\"package\\"\:\ \\"\\u5957\\u9910\\u4e00\\"\}", shape=rect, style=filled];
58 [class=intent, fillcolor=lightblue, label="\帮\我\查\一\下\我\三\月\的\流\量\有\多\少", shape=rect, style=filled];
59 [class=intent, fillcolor=lightblue, label="\/inform\{\\"time\\"\:\ \\"\\u4e09\\u6708\\"\}", shape=rect, style=filled];
60 [class=intent, fillcolor=lightblue, label="\办\理\吧", shape=rect, style=filled];
61 [class=intent, fillcolor=lightblue, label="\好\不\用\了", shape=rect, style=filled];
62 [class=intent, fillcolor=lightblue, label="\好\不\用\了", shape=rect, style=filled];
63 [class=intent, fillcolor=lightblue, label="\办", shape=rect, style=filled];
64 [class=intent, fillcolor=lightblue, label="\非\常\感\谢", shape=rect, style=filled];
65 [class=intent, fillcolor=lightblue, label="\你\好\吗\ \帮\我\ \看\一\看\ \三\月\ \流\量\ \多\少\钱", shape=rect, style=filled];
0 -> 48  [class="", key=0];
0 -> 49  [class="", key=0];
1 -> 50  [class="", key=0];
1 -> 51  [class="", key=0];
1 -> 52  [class="", key=0];
1 -> 53  [class="", key=0];
1 -> 54  [class="", key=0];
1 -> 55  [class="", key=0];
2 -> 56  [class="", key=0];
2 -> 57  [class="", key=0];
2 -> 58  [class="", key=0];
3 -> 59  [class="", key=0];
4 -> 60  [class="", key=0];
5 -> 6  [class="", key=NONE, label=""];
6 -> 61  [class="", key=0];
6 -> 62  [class="", key=0];
7 -> "-1"  [class="", key=NONE, label=""];
13 -> "-1"  [class="", key=NONE, label=""];
14 -> "-1"  [class="", key=NONE, label=""];
28 -> 63  [class="", key=0];
29 -> 6  [class="", key=NONE, label=""];
29 -> 37  [class="", key=NONE, label=""];
31 -> 64  [class="", key=0];
37 -> 65  [class="", key=0];
48 -> 1  [class="", key=0];
49 -> 14  [class="", key=0];
50 -> 2  [class="", key=0];
51 -> 13  [class="", key=0];
52 -> 3  [class="", key=0];
53 -> 4  [class="", key=0];
54 -> 7  [class="", key=0];
55 -> 7  [class="", key=0];
56 -> 3  [class="", key=0];
57 -> 28  [class="", key=0];
58 -> 4  [class="", key=0];
59 -> 4  [class="", key=0];
60 -> 5  [class="", key=0];
61 -> 7  [class="", key=0];
62 -> 31  [class="", key=0];
63 -> 29  [class="", key=0];
64 -> 13  [class="", key=0];
65 -> 4  [class="", key=0];
}
`;
    drawGraph(graph);
  } else {
    serveGraph();
  }


</script>
</body>
</html>
